<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    {include file="common_header"}
    <title>商家评论统计</title>
</head>
<body>
<!--header结束-->
<div style="width: 100%;background-color: #fff;">
        <div style="width:90%;margin-top: 50px">
            <span  class="text-c" style="margin-left: 450px;">
                <label>商家名称：</label>
                <span class="select-box inline">
                        <select id="shopids" class="select"  style="width: 180px">
                            {volist name="shop_ids" id="v"}
                                <option value ="{$v['id']}" >{$v['shop_name']}</option>
                            {/volist}
                        </select>
                </span>
            </span>
            <input type="text" onfocus="WdatePicker()" value="{$begin}" placeholder="开始时间" id="begin" class="input-text Wdate" style="width:250px;">
            --
            <input type="text" onfocus="WdatePicker()"  value="{$end}" placeholder="结束时间" id="end"  class="input-text Wdate" style="width:250px;">
            <button type="button" class="btn btn-success" onclick="search()"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
        </div>

    <div style=" width:1000px;margin:40px auto 0;height: 500px;" id="main">
    </div>
</div>
{include file='common_footer'}
<script type="text/javascript" src="__AJS__echarts.min.js" ></script>
<script type="text/javascript">
    var timelist ={$timelist};
    var ordernum ={$ordernum};
    var havecomment ={$havecomment};
    var staravg ={$staravg};
    var myCharta = echarts.init(document.getElementById('main'));
    option = {
        title : {
            text: '商家评论统计',
            //subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['总订单数','总评论数','星值平均分']
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : timelist
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'总订单数',
                type:'bar',
                data:ordernum,
                label:{
                    normal:{
                        show: true,
                        position: 'top'
                    }
                },

            },
            {
                name:'总评论数',
                type:'bar',
                data:havecomment,
                label:{
                    normal:{
                        show: true,
                        position: 'top'
                    }
                },
            },
            {
                name:'星值平均分',
                type:'bar',
                data:staravg,
                label:{
                    normal:{
                        show: true,
                        position: 'top'
                    }
                },

            }
        ]
    };
   /* option.xAxis[0]['data']= timelist;
    option.series[0]['data']= ordernum;
    option.series[1]['data']= havecomment;
    option.series[2]['data']= staravg;*/
    // 为echarts对象加载数据
    myCharta.setOption(option);
    //绑定图表resize事件
    window.addEventListener("resize", function () {
        myCharta.resize();
    });
    function search() {
        var  begin=$('#begin').val();
        var  end=$('#end').val();
        var  shop_id=$("#shopids option:selected").val();
        var url = "{:url('search')}";
        $.ajax({
            url: url,
            data:{begin:begin,end:end,shop_id:shop_id},
            dataType:'json',
            type:'post',
            success: function (data) {
                console.log(data);
                option.xAxis[0]['data']= data.timelist;
                option.series[0]['data']= data.ordernum;
                option.series[1]['data']= data.havecomment;
                option.series[2]['data']= data.staravg;
                option.title['text']= "商家评论统计";
                myCharta.setOption(option);
            },
            error: function () {
                layer.msg('网络错误，请稍后重试',{icon:2});
            }
        });
    }
</script>
</body>
</html>